<template>
  <div>
    <nav-bar title="选择人员"></nav-bar>
    <div class="maxinBox">
      <form action="/">
        <van-search
          v-model="nickname"
          show-action
          placeholder="请输入联系人姓名"
          @search="onSearch"
        />
      </form>
      <div v-if="isShow">
        <van-row v-show="personalByNameList !== '无此施工者'" v-for="(itemData, index) in personalByNameList" :key="index" class="addressBook backgroundfff" style="padding: 0 0.9375rem;">
          <van-checkbox-group v-model="choosePersonal">
            <van-cell-group>
              <van-cell
                :key="index"
                clickable
                :title="itemData.name"
                @click="toggle(index)"
              >
                <template #right-icon>
                  <van-checkbox :name="itemData" ref="checkboxes" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </van-row>
      </div>
      <div v-else>
        <van-collapse v-model="activeName1" accordion v-if="addressBookList.employees">
            <van-collapse-item :title="addressBookList.employees.name" name="1" icon="shop-o">
              <van-collapse v-model="activeNames1" accordion>
                <van-collapse-item v-for="(item, index) in addressBookList.employees.children" :key="index" :title="item.name" :name="item.index" icon="shop-o">
                  <van-collapse v-model="activeNames2" accordion>
                    <van-collapse-item v-for="(itemData, index) in item.children" :key="index" :title="itemData.name" :name="itemData.index" icon="shop-o">
                      <van-checkbox-group v-model="choosePersonal">
                        <van-cell-group>
                          <van-cell
                            v-for="(itemDatas, index) in itemData.userVos"
                            :key="index"
                            clickable
                            @click="toggle(index)"
                          >
                            <template #title>
                              <span class="custom-title" :style="itemDatas.monitor? 'color: #1577ff;': 'color: block'">{{itemDatas.name}}</span>
                            </template>
                            <template #right-icon>
                              <van-checkbox :name="itemDatas" ref="checkboxes" />
                            </template>
                          </van-cell>
                        </van-cell-group>
                      </van-checkbox-group>
                    </van-collapse-item>
                  </van-collapse>
                  <van-checkbox-group v-model="choosePersonal">
                    <van-cell-group>
                      <van-cell
                        v-for="(itemDatas, index) in item.userVos"
                        :key="index"
                        clickable
                        @click="toggle(index)"
                      >
                        <template #title>
                          <span class="custom-title" :style="itemDatas.monitor? 'color: #1577ff;': 'color: block'">{{itemDatas.name}}</span>
                        </template>
                        <template #right-icon>
                          <van-checkbox :name="itemDatas" ref="checkboxes" />
                        </template>
                      </van-cell>
                    </van-cell-group>
                  </van-checkbox-group>
                </van-collapse-item>
              </van-collapse>
            </van-collapse-item>
          </van-collapse>

          <van-collapse v-model="activeName" accordion v-if="addressBookList.builders">
            <van-collapse-item :title="addressBookList.builders.builderDeptName" name="1" icon="shop-o">
              <van-collapse v-model="activeNames" accordion>
                <van-collapse-item v-for="(item, index) in addressBookList.builders.builderContactVoList" :key="index" :title="item.nodeName" :name="item.index" icon="shop-o">
                  <van-checkbox-group v-model="choosePersonal">
                    <van-cell-group>
                      <van-cell
                        v-for="(itemData, index) in item.userVos"
                        :key="index"
                        clickable
                        @click="toggle(index)"
                      >
                        <template #title>
                          <span class="custom-title" :style="itemData.monitor? 'color: #1577ff;': 'color: block'">{{itemData.name}}</span>
                        </template>
                        <template #right-icon>
                          <van-checkbox :name="itemData" ref="checkboxes" />
                        </template>
                      </van-cell>
                    </van-cell-group>
                  </van-checkbox-group>
                </van-collapse-item>
              </van-collapse>
            </van-collapse-item>
          </van-collapse>
      </div>
    </div>
    <div class="center">
       <van-button style="width: 80%;" round type="info" @click="save">确定</van-button>
    </div>
  </div>
</template>

<script>
  import Bus from '../../../../utils/eventBus.js'
  import realTimeInspectionAPI from '../../../../api/workAPI/realTimeInspectionAPI.js'
  import addressAPI from '../../../../api/workAPI/addressBookAPI.js'
  export default {
    data() {
      return {
        personalByNameList: [],
        isShow: false,
        choosePersonal: [],
        addressBookList: [],
        activeName: 1,
        activeNames: 0,
        activeName1: 1,
        activeNames1: 0,
        activeNames2: 0,
        nickname: '',
        choosePersonType: '',
        // personListByNameList: []
      }
    },
    methods: {
      // 关键字查询
      onSearch(val) {
        this.isShow = true
        let data
        if (this.choosePersonType === 'head') {
          data = {
            name: this.nickname,
            type: 1
          }
        } else {
          data = {
            name: this.nickname,
            type: 2
          }
        }
        realTimeInspectionAPI.getHeadAddressByName(data).then(res => {
          if (res.length) {
            this.personalByNameList = res
          }
        })
      },
      // 负责人通讯录查询
      getPersonalList() {
        if (this.choosePersonType === 'head') {
          realTimeInspectionAPI.getHeadAddress().then(res => {
            this.addressBookList = res
          })
        } else {
          realTimeInspectionAPI.getCPeople().then(res => {
            this.addressBookList = res
          })
        }
      },
      // 多选选择
      toggle(index) {
        this.$refs.checkboxes[index].toggle();
      },
      // 保存选择
      save() {
        this.$router.push({
          name: 'InitiateRealTime'
        })
      }
    },
    destroyed() {
      Bus.$emit('personHeadList', {
        personType: this.choosePersonType,
        choosePersonal: this.choosePersonal
      })
    },
    mounted() {
      this.choosePersonType = JSON.parse(JSON.stringify(this.$route.params.data))
      this.getPersonalList()
    }
  }
</script>

<style scoped lang="scss">
  .diff{
    padding-left: 3 * $spacing;
  }
  .organization{
    padding: 2 * $spacing;
    border-bottom: $border;
    text-align: right;
    background-color: $color;
    line-height: 2.5rem;
  }
</style>
